/*
 * @Author: GaoYiNuo 1534815804@qq.com
 * @Date: 2022-07-24 21:32:16
 * @LastEditors: GaoYiNuo 1534815804@qq.com
 * @LastEditTime: 2022-07-24 22:10:48
 * @FilePath: \project3\5_creation\app\src\view\Archive\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux'
import { MyState, TITLEITEM } from "../../type/router.d"
import { bindActionCreators, Dispatch } from "redux"
import * as actions from "../../store/modules/action"
import axios from "axios"
import style from "./archive.module.scss"
// import "../../api/index"
import Righttop from "../../component/archive_detail/Righttop"


interface PROPS {
  getTitileAction: (arr: TITLEITEM[]) => void,
  titleData: TITLEITEM[],
  history: any,
  getDetailAction: (obj: TITLEITEM) => void,
  getactDataAction: (arr: any) => void,
  arcData: any,
  getActDetailAction: (obj: any) => void
}
export const Index = (props: PROPS) => {
  const [active, setActive] = useState(0)
  //请求数据库数据
  useEffect(() => {
    axios.get("/api/article/recommend").then(res => {
      console.log(res.data.data)
      props.getactDataAction(res.data.data)
    })
  }, [])
  //模拟挂载期
  useEffect(() => {
    if (!props.titleData.length) {
      axios.get("/data").then(res => {
        console.log(res.data.list)
        props.getTitileAction(res.data.list)
      })
    }
  }, [])
  return (
    <div className={style["archive-wrap"]}>
      <div className={style["archive-wrap-head"]}>
        <div className={style["archive-wrap-left"]}>
          <div className={style["archive-wrap-title"]}>归档</div>
          <div className={style["archive-wrap-num"]}>共计<span >5</span> 篇</div>
        </div>
        <div className={style["archive-wrap-conent"]}>
          <span className={style["year"]}>2022</span>
          <p className={style["mount"]}>jujs</p>
          <div className={style["conent"]}>
            <ul>{props.arcData.length ? props.arcData.map((item: any, index: number) => {
              return <li
                onClick={() => {
                  // props.history.push(`/index/archive_details/${item.id}`);
                  props.history.push(`/index/archiveDetails/${item.id}`);
                  // props.getDetailAction(item)
                  props.getActDetailAction(item)
                }}
                onMouseOver={() => { setActive(index) }}
                key={index}> <span>04-12&emsp; </span><b>{item.title}</b> </li>
            }) : "暂无数据"}
            </ul>
          </div>
        </div>

      </div>
      <div className={style["archive-wrap-right"]}>

        <Righttop></Righttop>
      </div>
    </div>

  )
}

const mapStateToProps = (state: MyState) => ({
  titleData: state.titleData,
  arcData: state.arcData
})

const mapDispatchToProps = (dispatch: Dispatch) => {
  return bindActionCreators(actions, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(Index)
